<template>
  <div>
    <van-popup v-model="show">
      <div class="box">
        <h1>破损登记</h1>
        <div class="formBox">
          <ul>
            <li>
              <div>
                <p>主运单号：</p>
              </div>
              <div>
                <input
                  v-model="params.masterWaybill"
                  @change="getCargoBill"
                  placeholder="点击扫描可直接扫描"
                  type="text"
                />
                <img
                  @click="openStartScan(0)"
                  src="@/assets/saoyisao.png"
                  alt="图片"
                />
              </div>
            </li>
            <li>
              <div>
                <p>分运单号：</p>
              </div>
              <div>
                <input
                  v-model="params.subWaybill"
                  @change="getCargoBill"
                  placeholder="点击扫描可直接扫描"
                  type="text"
                />
                <img
                  @click="openStartScan(1)"
                  src="@/assets/saoyisao.png"
                  alt="图片"
                />
              </div>
            </li>
            <li>
              <div>
                <p>破损件数：</p>
              </div>
              <div>
                <van-stepper
                  class="Stepper"
                  v-model="params.damageNum"
                  theme="round"
                  :default-value="1"
                  button-size="22"
                  disable-input
                />
              </div>
            </li>
            <li>
              <div>
                <p>破损图片：</p>
              </div>
              <div>
                <div class="showPhotos">
                  <div
                    v-for="(item, index) in params.damageInfoFiles"
                    :key="index"
                  >
                    <img
                      :src="
                        base +
                          '/dmsp-file/file/oper/download?fileId=' +
                          item.fileId
                      "
                      @click="previewImg(index)"
                      alt=""
                    />
                  </div>

                  <div>
                    <img
                      class="add"
                      @click="photoShow = true"
                      src="@/assets/jia.png"
                      alt="加"
                    />
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div>
                <p>破损备注：</p>
              </div>
              <div>
                <van-field
                  class="Textarea"
                  v-model="params.remark"
                  rows="4"
                  autosize
                  type="textarea"
                  placeholder="请输入留言"
                />
              </div>
            </li>
          </ul>
        </div>
        <!-- 按钮 -->
        <div class="ButtonBox">
          <van-row gutter="20">
            <van-col span="12">
              <van-button class="Button" @click="damageInfoSave" block round
                >确认</van-button
              >
            </van-col>
            <van-col span="12">
              <van-button class="Button1" @click="cancel" block round
                >取消</van-button
              >
            </van-col>
          </van-row>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="photoShow">
      <div class="box1">
        <ul>
          <li class="box1_item">
            <p>破损一</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="1"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList1"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损二</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="2"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList2"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损三</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="3"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList3"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损四</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="4"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList4"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损五</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="5"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList5"
                @delete="deleteFile"
              />
            </div>
          </li>

          <li class="box1_item">
            <p>破损六</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="6"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList6"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损七</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="7"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList7"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损八</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="8"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList8"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损九</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="9"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList9"
                @delete="deleteFile"
              />
            </div>
          </li>
          <li class="box1_item">
            <p>破损十</p>
            <div>
              <van-uploader
                :max-size="10 * 1000 * 1024"
                :after-read="handUpdateFile"
                :name="10"
                @oversize="onOversize"
                capture="camera"
                v-model="fileList10"
                @delete="deleteFile"
              />
            </div>
          </li>
        </ul>
        <!-- 按钮保存 -->
        <div class="buttom">
          <van-button
            type="primary"
            @click="photoShow = false"
            block
            round
            size="normal"
            >保存</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { base } from "@/utils/config";
import {
  Popup,
  Stepper,
  Col,
  Row,
  Button,
  Field,
  Uploader,
  Toast,
  ImagePreview,
} from "vant";
import {
  damageInfoSave,
  damageInfoUpdate,
  getDamageInfo,
  UpdateFile,
  getCargoBill,
} from "./../services/api";

Vue.use(Col);
Vue.use(Row);
Vue.use(Popup);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(Field);
Vue.use(Uploader);
Vue.use(ImagePreview);
export default {
  props: ["propsData", "type1"],
  data() {
    return {
      show: false,
      photoShow: false,
      params: {
        masterWaybill: "",
        subWaybill: "",
        damageNum: 1,
        remark: "",
        damageInfoFiles: [],
      },
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      fileList8: [],
      fileList9: [],
      fileList10: [],
      type: 0,
      id: "",
      data: {},
      base: base,
    };
  },
  mounted() {
    // 回调
    window["scan_data1"] = (e) => {
      if (this.type == 0) {
        let str = e.replace(/-/g, "").slice(0, 11);
        this.params.masterWaybill = str.slice(0, 3) + "-" + str.slice(3);
      } else {
        this.params.subWaybill = e;
      }
      // 根据主单号和运单号查询破损信息
      this.getCargoBill();
    };
  },
  methods: {
    // 自动和手动输入查询
    getCargoBill() {
      getCargoBill({
        deliverCargoBillId: this.$route.params.id || this.id,
        masterWaybill: this.params.masterWaybill,
        subWaybill: this.params.subWaybill,
      }).then((res) => {
        if (res) {
          // 还需要编辑赋值
          this.data = res;
          this.id = res.id;
          this.params = {
            masterWaybill: res.masterWaybill,
            subWaybill: res.subWaybill,
            damageNum: res.damageNum,
            remark: res.remark,
            damageInfoFiles: res.damageInfoFiles,
          };
          this.fileList1 =
            res.damageInfoFileGroupByType[1] &&
            res.damageInfoFileGroupByType[1].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList2 =
            res.damageInfoFileGroupByType[2] &&
            res.damageInfoFileGroupByType[2].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList3 =
            res.damageInfoFileGroupByType[3] &&
            res.damageInfoFileGroupByType[3].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList4 =
            res.damageInfoFileGroupByType[4] &&
            res.damageInfoFileGroupByType[4].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList5 =
            res.damageInfoFileGroupByType[5] &&
            res.damageInfoFileGroupByType[5].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList6 =
            res.damageInfoFileGroupByType[6] &&
            res.damageInfoFileGroupByType[6].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList7 =
            res.damageInfoFileGroupByType[7] &&
            res.damageInfoFileGroupByType[7].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList8 =
            res.damageInfoFileGroupByType[8] &&
            res.damageInfoFileGroupByType[8].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList9 =
            res.damageInfoFileGroupByType[9] &&
            res.damageInfoFileGroupByType[9].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList10 =
            res.damageInfoFileGroupByType[10] &&
            res.damageInfoFileGroupByType[10].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.show = true;
        } else {
          this.data = {};
          this.id = "";
          this.params = {
            ...this.params,
            damageNum: 1,
            remark: "",
            damageInfoFiles: [],
          };
          this.fileList1 = [];
          this.fileList2 = [];
          this.fileList3 = [];
          this.fileList4 = [];
          this.fileList5 = [];
          this.fileList6 = [];
          this.fileList7 = [];
          this.fileList8 = [];
          this.fileList9 = [];
          this.fileList10 = [];
        }
      });
    },
    // 编辑时获取
    getDamageInfo(e) {
      getDamageInfo({ damageInfoId: e }).then((res) => {
        if (res) {
          // 还需要编辑赋值
          this.data = res;
          this.id = res.id;
          this.params = {
            masterWaybill: res.masterWaybill,
            subWaybill: res.subWaybill,
            damageNum: res.damageNum,
            remark: res.remark,
            damageInfoFiles: res.damageInfoFiles,
          };
          this.fileList1 =
            res.damageInfoFileGroupByType[1] &&
            res.damageInfoFileGroupByType[1].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList2 =
            res.damageInfoFileGroupByType[2] &&
            res.damageInfoFileGroupByType[2].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList3 =
            res.damageInfoFileGroupByType[3] &&
            res.damageInfoFileGroupByType[3].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList4 =
            res.damageInfoFileGroupByType[4] &&
            res.damageInfoFileGroupByType[4].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList5 =
            res.damageInfoFileGroupByType[5] &&
            res.damageInfoFileGroupByType[5].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList6 =
            res.damageInfoFileGroupByType[6] &&
            res.damageInfoFileGroupByType[6].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList7 =
            res.damageInfoFileGroupByType[7] &&
            res.damageInfoFileGroupByType[7].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));

          this.fileList8 =
            res.damageInfoFileGroupByType[8] &&
            res.damageInfoFileGroupByType[8].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList9 =
            res.damageInfoFileGroupByType[9] &&
            res.damageInfoFileGroupByType[9].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.fileList10 =
            res.damageInfoFileGroupByType[10] &&
            res.damageInfoFileGroupByType[10].map((item) => ({
              url: base + item.fileUrl,
              isImage: true,
            }));
          this.show = true;
        }
      });
    },
    // 判断数据是否可以提交吗
    checkData() {
      let isBoot = 0;
      if (this.params.masterWaybill == "") {
        isBoot = 1;
        return;
      }
      this.propsData.deliverCargoWaybills.map((item) => {
        if (
          item.masterWaybill
            .replace(/-/g, "")
            .startsWith(
              this.params.masterWaybill.replace(/-/g, "").slice(0, 11)
            ) ||
          item.masterWaybill.replace(/-/g, "") ==
            this.params.masterWaybill.replace(/-/g, "")
        ) {
          if (
            item.subDeliverCargoWaybills &&
            item.subDeliverCargoWaybills.length > 0
          ) {
            if (this.params.subWaybill == "") {
              isBoot = 2;
              return;
            }
          }
        }
      });
      return isBoot;
    },
    // 新增破损
    damageInfoSave() {
      if (this.type1 == "0") {
        if (this.checkData() == 1) {
          Toast("请填写主运单号");
          return;
        } else if (this.checkData() == 2) {
          Toast("该订单有子订单，请填写子订单");
          return;
        }
      }
      if (this.id == "") {
        damageInfoSave({
          cargoType: this.propsData ? this.propsData.cargoType : "",
          damageInfoFiles: this.params.damageInfoFiles,
          damageNum: this.params.damageNum,
          damagePhotoNum: this.params.damageInfoFiles.length,
          damageType: this.propsData ? this.propsData.damageType : "",
          deliverCargoBillId: this.propsData
            ? this.propsData.deliverCargoBillId
            : "",
          deliverCargoWaybillId: this.propsData
            ? this.propsData.deliverCargoWaybillId
            : "",
          deliverCargoBillId: this.propsData ? this.propsData.id : "",
          remark: this.params.remark,
          subWaybill: this.params.subWaybill,
          masterWaybill: this.params.masterWaybill,
        }).then((res) => {
          if (res) {
            Toast("保存成功");
            if (this.type1 == "1") {
              this.$emit("refreshData");
            } else {
              this.$emit("addDamageInfos", {
                subWaybill: this.params.subWaybill,
                masterWaybill: this.params.masterWaybill,
                damageNum: this.params.damageNum,
                id: res.id,
              });
            }
            this.resetParams();
          }
        });
      } else {
        damageInfoUpdate({
          id: this.id,
          cargoType: this.data.cargoType,
          damageInfoFiles: this.params.damageInfoFiles,
          damageNum: this.params.damageNum,
          damagePhotoNum: this.params.damageInfoFiles.length,
          damageType: this.data.damageType,
          deliverCargoBillId: this.data.deliverCargoBillId,
          deliverCargoWaybillId: this.data.deliverCargoWaybillId,
          deliverCargoBillId: this.data.id,
          remark: this.params.remark,
          subWaybill: this.params.subWaybill,
          masterWaybill: this.params.masterWaybill,
        }).then((res) => {
          if (res) {
            Toast("编辑成功");
            if (this.type1 == "1") {
              this.$emit("refreshData");
            } else {
              this.$emit("addDamageInfos", {
                subWaybill: this.params.subWaybill,
                masterWaybill: this.params.masterWaybill,
                damageNum: this.params.damageNum,
              });
            }
            // 调用破损列表刷新
            this.resetParams();
          }
        });
      }
    },
    // 限制图片格式
    beforeRead(file) {
      if (
        file.type !== "image/jpeg" ||
        file.type !== "image/jpg" ||
        file.type !== "image/png"
      ) {
        Toast("请上传 jpg/jpeg/png 格式图片");
        return false;
      }
      return true;
    },
    // 上传图片
    handUpdateFile(files, e) {
      const formData = new FormData();
      formData.append("file", files.file);
      UpdateFile(formData).then((res) => {
        if (res) {
          this.params.damageInfoFiles.push({
            damageInfoId: "",
            fileId: res.fileId,
            fileName: res.fileName,
            fileType: e.name,
            fileUrl: res.alias,
            id: res.id,
          });
        }
      });
    },
    // 删除
    deleteFile(e, file) {
      let id = this.params.damageInfoFiles.filter(
        (item) => item.fileType == file.name
      )[file.index].id;
      let index = this.params.damageInfoFiles.findIndex(
        (item) => item.id == id
      );
      this.params.damageInfoFiles.splice(index, 1);
    },
    // 限制函数
    onOversize() {
      Toast("图片大小不能超过10M");
    },
    // 调用摄像头扫码
    openStartScan(e) {
      this.type = e;
      try {
        window.appPlat.startScan1();
      } catch (e) {
        Toast("设备不支持");
      }
    },
    //重置
    resetParams() {
      this.params = {
        masterWaybill: "",
        subWaybill: "",
        damageNum: 1,
        remark: "",
        damageInfoFiles: [],
        damageInfoId: "",
      };
      this.fileList1 = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.fileList4 = [];
      this.fileList5 = [];
      this.fileList6 = [];
      this.fileList7 = [];
      this.fileList8 = [];
      this.fileList9 = [];
      this.fileList10 = [];
      this.type = 0;
      this.id = "";
      this.data = {};
      this.show = false;
    },
    // 取消
    cancel() {
      this.resetParams();
      this.show = false;
    },
    // 预览
    previewImg(index) {
      ImagePreview({
        images: this.params.damageInfoFiles.map(
          (item) => this.base + item.fileUrl
        ),
        startPosition: index,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: rgba(0, 0, 0, 0);
}
.box {
  width: 95vw;
  max-height: 90vh;
  background-color: #fff;
  border-radius: 9px;
  padding: 15px 10px;
  box-sizing: border-box;
  overflow: auto;

  & > h1 {
    font-size: 17px;
    font-weight: 500;
    color: #3a3a3a;
    line-height: 24px;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 10px;
  }

  & > .formBox {
    width: 100%;

    & > ul {
      overflow: hidden;
      list-style: none;
      width: 100%;

      li {
        width: 100%;
        margin-bottom: 10px;
        display: flex;

        & > div:first-child {
          width: 23%;

          & > p {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            line-height: 30px;
          }
        }

        & > div:last-child {
          width: 77%;
          flex: 1;
          position: relative;
          & > input {
            width: 100%;
            height: 30px;
            background: #e9ecef;
            border-radius: 18px;
            opacity: 0.5;
            outline: none;
            border: none;
            padding: 0 40px 0 10px;
            box-sizing: border-box;
          }

          & > img {
            width: 25px;
            position: absolute;
            top: 2.5px;
            right: 10px;
          }
          & > .Textarea {
            width: 100%;
            background: #e9ecef;
            border-radius: 8px;
            color: #333;
            padding: 5px 10px;
            box-sizing: border-box;
            font-size: 14px;
          }
          & > .Stepper {
            padding: 4px 0;
            box-sizing: border-box;
            /deep/.van-stepper__plus {
              color: #999999 !important;
              background-color: #fff !important;
              border: 2px solid #999999 !important;
            }
            /deep/.van-stepper__minus {
              color: #fff;
              background-color: #f29d12;
              border: 2px solid #f29d12;
            }
          }
          & > .showPhotos {
            width: 100%;
            overflow: hidden;
            & > div {
              width: 76px;
              height: 76px;
              float: left;
              border-radius: 10px;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #f5f5f5;
              margin: 0 10px 10px 0;
              box-sizing: border-box;
              img {
                width: 100%;
                display: block;
              }
              img.add {
                width: 30px;
              }
            }
          }
        }
      }
    }
  }
}

.ButtonBox {
  width: 80%;
  margin: 10px auto;

  .Button {
    width: 100%;
    height: 35px;
    background: #f29d12;
    border-radius: 18px;
    border: 2px solid #f29d12;
    line-height: 35px;
    color: #fff;
  }

  .Button1 {
    width: 100%;
    height: 35px;
    border-radius: 18px;
    line-height: 35px;
    border: 2px solid #acb7bc;
  }
}
.box1 {
  width: 100vw;
  height: 100vh;
  background-color: #eaedf0;
  padding: 15px 10px;
  box-sizing: border-box;
  overflow: auto;
  padding-bottom: 100px;
  .box1_item {
    width: 100%;
    margin-bottom: 20px;
    & > p {
      font-size: 15px;
      text-align: center;
      font-weight: 500;
      color: #333333;
      line-height: 40px;
    }
    & > div {
      width: 100%;
      overflow: hidden;
      background-color: #fff;
      border-radius: 10px;
      padding: 10px 2px 2px 10px;
      box-sizing: border-box;
    }
  }
  .buttom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    button {
      background-color: #f29d12;
      border-color: #f29d12;
    }
  }
}
</style>
